<template>
  <div ref="chart" class="chart-container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  data: { dimensions: string[]; data: number[] }
}>()

const chart = ref<HTMLElement>()
let myChart: echarts.ECharts

onMounted(() => {
  myChart = echarts.init(chart.value!)
  updateChart()
})

watch(() => props.data, updateChart)

function updateChart() {
  myChart.setOption({
    radar: {
      indicator: props.data.dimensions.map(name => ({ name, max: 100 })),
      shape: 'circle',
      splitArea: {
        areaStyle: {
          color: ['rgba(64,158,255,0.1)']
        }
      }
    },
    series: [{
      type: 'radar',
      data: [{
        value: props.data.data,
        areaStyle: { color: 'rgba(64,158,255,0.4)' }
      }]
    }]
  })
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>